require('normalize.css/normalize.css');
require('styles/App.css');
require('../styles/bootstrap.css');

import React from 'react';
import {
	Route,
	IndexRoute,
	Router,
	hashHistory
} from 'react-router';
import $ from 'jquery';
import Header from './Header.js';
import Player from './Player.js';
import MusicList from './MusicList.js';
import 'jplayer/dist/jplayer/jquery.jplayer.min.js';
import Pubsub from 'pubsub-js';


var musicDatas = require('../data/MusicData.json');
var playMode = [
	'loop',
	'repeat',
	'random'
];
class App extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			currentMusicItem: musicDatas[0],
			musicList: musicDatas,
			playMode: playMode[0]
		};
	}
	playMusic(musicItem) {
		$('#player').jPlayer('setMedia', {
			mp3: musicItem.file
		}).jPlayer('play');
		this.setState({
			currentMusicItem: musicItem
		});
	}
	findPlayModeIndex(i) {
		return playMode.indexOf(i);
	}
	playNext(type = 'next') {
		var currentMusicItemIndex = this.findMusicItemIndex(this.state.currentMusicItem);
		var musicListLength = this.state.musicList.length;
		var willPlayMusicItem = null;
		if (type === 'next') {
			if (this.state.playMode == 'repeat' || this.state.playMode == 'loop') {
				willPlayMusicItem = (currentMusicItemIndex + 1) % musicListLength;
				this.playMusic(this.state.musicList[willPlayMusicItem]);
			} else
				this.playRandom();
		} else {
			if (this.state.playMode == 'repeat' || this.state.playMode == 'loop') {
				willPlayMusicItem = (currentMusicItemIndex - 1 + musicListLength) % musicListLength;
				this.playMusic(this.state.musicList[willPlayMusicItem]);
			} else
				this.playRandom();
		}
	}
	playRandom() {
		var othersList = this.state.musicList.filter(item => {
			return item !== this.state.currentMusicItem;
		});
		var random = Math.floor(Math.random() * (this.state.musicList.length - 1));
		this.playMusic(othersList[random]);
	}
	findMusicItemIndex(musicItem) {
		return this.state.musicList.indexOf(musicItem);
	}
	componentDidMount() {
		$('#player').jPlayer({
			supplied: 'mp3',
			wmode: 'window'
		});
		this.playMusic(this.state.currentMusicItem);
		$('#player').bind($.jPlayer.event.ended, () => {
			console.log(this.state.playMode);
			if (this.state.playMode === 'repeat')
				$('#player').jPlayer('play', 0);
			else if (this.state.playMode === 'loop')
				this.playNext('next').bind(this);
			else
				this.playRandom().bind(this);
		});
		Pubsub.subscribe('DELETE_MUSIC', (msg, musicItem) => {
			this.setState({
				musicList: this.state.musicList.filter(item => {
					return item != musicItem;
				})
			});
		});
		Pubsub.subscribe('PLAY_MUSIC', (msg, musicItem) => {
			this.playMusic(musicItem);
		});
		Pubsub.subscribe('PLAY_NEXT', (msg) => {
			this.playNext('next');
		});
		Pubsub.subscribe('PLAY_PREV', (msg) => {
			this.playNext('prev');
		});
		Pubsub.subscribe('PLAY_MODE', (msg) => {
			this.setState({
				playMode: playMode[(this.findPlayModeIndex(this.state.playMode) + 1) % 3]
			});
		});
	}
	componentWillUnMount() {
		Pubsub.unsubscribe('DELETE_MUSIC');
		Pubsub.unsubscribe('PLAY_MUSIC');
		Pubsub.unsubscribe('PLAY_NEXT');
		Pubsub.unsubscribe('PLAY_PREV');
		Pubsub.unsubscribe('PLAY_MODE');
		$('#player').unbind($.jPlayer.event.ended);
	}
	render() {
		return ( < div >
			< Header / >
			< div id = "player" > < /div> {
				React.cloneElement(this.props.children, this.state)
			} < /div>
		);
	}
}
class AppComponent extends React.Component {
	render() {
		return (
			<Router history={hashHistory}>
			  <Route path="/" component={App}>
			     <IndexRoute component={Player}></IndexRoute>
			     <Route path="/list" component={MusicList}></Route>
			  </Route>
			</Router>
		);
	}
}

AppComponent.defaultProps = {};

export default AppComponent;